<template>
	<view class="content" :style="{ paddingTop: top }">
		<view class="top oh">
			<view class="time_box">
				<text class="month font_bebas navy_blue f_56">{{monthStr}}</text>
				<view class="btn_view">
					<image @tap="setMonth(-1)" :class="['icon', startMonth == thisMonth ? '' : 'tf-180']" :src="startMonth == thisMonth ? imgPrefix('/static/image/teacher/next_icon_border_gery.png') : imgPrefix('/static/image/teacher/next_icon_border.png')"
					></image>
					<image @tap="setMonth(+1)" :class="['icon', endMonth == thisMonth ? 'tf-180' : '']" :src="endMonth == thisMonth ? imgPrefix('/static/image/teacher/next_icon_border_gery.png') : imgPrefix('/static/image/teacher/next_icon_border.png')"
					></image>
				</view>
			</view>
			<view class="week_list">
				<view :class="['week_item', monthArr[0] == weekIndex ? 'navy_blue' : '']" v-for="(item, weekIndex) in weekList" :key="weekIndex">周{{ item }}</view>
			</view>
			<view :class="['month_list','ts-5', shrinkButton ? 'shrink' : '']" :style="{marginTop:domTop+'rpx' , height: domHeight}">
				<!-- 动态计算整体高度 -->
				<view class="month_item" v-for="leftBlockIndex of monthArr[1]" :key="leftBlockIndex"></view>
				<view @tap="bindDay(dayIndex)" :class="['month_item', bindIndex == dayIndex ? 'month_item_active' : '']" v-for="dayIndex in monthArr[2]" :key="dayIndex">
					<text :class="['num', monthArr[3][dayIndex] == 1 || monthArr[3][dayIndex] == 4 ? 'gery' : '']">{{ dayIndex + 1 }}</text>
					<text v-if="monthArr[3][dayIndex] != 0 && monthArr[3][dayIndex] != 4" :class="[monthArr[3][dayIndex] == 1 ? 'tips_gery' : monthArr[3][dayIndex] == 2 ? 'tips_this' : 'tips_active']"></text>
				</view>
				<view class="month_item" v-for="rightBlockIndex in monthArr[4]" :key="rightBlockIndex"></view>
			</view>
			<view class="shrink_button"><image @tap="setShrink" :class="['image','ts-5',shrinkButton?'tf-180':'']" :src="imgPrefix('/static/image/teacher/bottom_icon.png')"></image></view>
		</view>
		<view class="course_list" v-if="noDataText==''">
			<view class="course_item" v-for="(item,index) in appointmentArr" @click="pageTo('/pages/teacher/class_time_detail/index',{course_id:item.course_id})" :key="index">
				<view class="course_top dis-flex flex-y-center">
					<image class="user_header" :src="item.user!=null?item.user.avatar:imgPrefix('/static/image/icon/default_avatar.png')" mode="aspectFill"></image>
					<view class="course_info">
						<text class="user_contact" v-if="item.user!=null"><text class="nickname">{{item.user.nickname}}</text> <text selectable>{{item.user.mobile}}</text></text>
						<text class="course_num_text">第<text class="course_num">{{item.index}}</text>课 剩余<text class="course_num">{{item.surplus}}</text>课程</text>
					</view>
				</view>
				<view class="course_bottom flex-y-center">
					<view class="course_time">{{setTime(item.date, 'yyyy.MM.dd')}}{{item.week}} {{item.time}}</view>
					<view class="course_state">
						<text class="course_state_text">{{ item.status == 3 ? (item.is_start ? '授课中' : '未开始') : item.status == 2 ? '预约上课' : item.status == 4 ? '课次已完成' : '' }}</text>
						<image class="image" :src="imgPrefix('/static/image/teacher/arrows.png')"></image>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="no_data">
			<list-empty :defaultIcon="1" :text="noDataText"></list-empty>
			<text class="dis-block t-c gery1">可点击日历上其它日期查看课程</text>
		</view>
	</view>
</template>
<script>
const app = getApp();
import { commonMixinFun } from '@/static/mixins/common.js'; // 公共
import { changeFormat } from '@/static/mixins/changeFormat.js';
import API from '@/static/api/index.js';
import loadMore from '@/components/loadmore/index.vue';
import { format, setNewdate } from '@/static/uitls/common.js';
export default {
	mixins: [commonMixinFun, changeFormat],
	props: ['top'],
		components: {
			loadMore
		},
	data() {
		return {
			proportion: 750 / uni.getSystemInfoSync().windowWidth, //将高度乘以换算后的该设备的rpx与px的比例
			startMonth: '2020-08', // 开始月份
			endMonth: format(setNewdate('y', 2, new Date()), 'yyyy-MM'), // 结束月份
			thisMonth: format(new Date(), 'yyyy-MM'), //当前月份
			weekList: ['一', '二', '三', '四', '五', '六', '日'],
			bindIndex: new Date().getDate() + 1, //在月份中点击的日期
			appointmentArr: [], //当天预约了的数组
			monthSelectArr: [], //当月选过了的日期
			shrinkButton: false,// 当前日历是否收缩展示
			domTop:0 ,//日期列表在收缩时需要上移量
			domHeight:'',//日期列表在收缩时高度
			noDataText:''//没有数据时文本
		};
	},
	computed: {
		monthStr:function(){
			let {thisMonth}=this
			return thisMonth.split('-')[0]+'.'+Number(thisMonth.split('-')[1])
		},
		monthArr: function() {
			let arr = [];
			let { thisMonth, bindIndex, monthSelectArr } = this;
			let monthstr = thisMonth.replace(/-/g, '/');
			let thisDay = new Date(monthstr + '/' + 1).getDay();
			let dayNum = new Date(thisMonth.split('-')[0], thisMonth.split('-')[1], 0).getDate(); // 当月天数
			let thisMonthArr = [];
			let nowDayStr = format(new Date(), 'yyyy-MM-dd');
			let nowDay = new Date(nowDayStr);
			for (let i = 0; i < dayNum; i++) {
				//0没找到  1/4 当前时间过了该时间 2 同一天 3 没过
				let dayObj = new Date(monthstr + '/' + Number(i + 1));
				if (monthSelectArr.findIndex(o => Number(o.split('-')[2] - 1) == i) != -1) {
					let dayStr = format(dayObj, 'yyyy-MM-dd');
					thisMonthArr.push(nowDayStr == dayStr ? 2 : nowDay > dayObj ? 1 : 3);
				} else {
					thisMonthArr.push(nowDay > dayObj ? 4 : 0);
				}
			}
			// app._log(bindIndex)
			arr.push(new Date(monthstr + '/' + bindIndex).getDay()); // 点击对象是周N 0
			let blockNum = thisDay == 0 ? 0 : thisDay - 1; // 当月1号前需要N个空格 1
			arr.push(blockNum); // 当月1号前需要N个空格 1
			arr.push(dayNum); // 当月天数 2
			arr.push(thisMonthArr); // 当月每个日期是否有预约过数组 3
			arr.push(7 - (Math.floor(Number(dayNum + blockNum) % 7) != 0 ? Math.floor(Number(dayNum + blockNum) % 7) : 7)); // 当月日期列表后需要N个空格 4
			// app._log(arr)
			return arr;
		},
		thisDay:function(){ // 日期
			let {thisMonth}=this;
			let num = new Date(thisMonth.split('-')[0],thisMonth.split('-')[1],0).getDate();
			app._log(thisMonth,num)
			if(num<=Number(this.bindIndex)){
				this.bindIndex=0
			}
			return thisMonth+'-'+(this.bindIndex+1)
		}
	},
	watch:{
		thisMonth(val,oldVal){
			this.getCalendarLocation()
		},
		shrinkButton(val,oldVal){//变化时计算收缩量
			// app._log(val,oldVal)
			app._log('是不是你在搞事',val,oldVal)
			this.getCalendarLocation()
		},
		thisDay(val,oldVal){ //日期变化
			// app._log(val,oldVal)
			this.getTAppointmentList()
		}
	},
	methods: {
		getCalendarLocation(){
			setTimeout(()=>{
				let {bindIndex,monthArr,shrinkButton}=this
				if(shrinkButton){
					let bindIndexCol = Math.ceil((bindIndex+1+monthArr[1])/7)//当前日期的块在第几行
					this.domTop = -Number((bindIndexCol-1)*80+(bindIndexCol>2?bindIndexCol-1:0)*20)
					this.domHeight = Number(bindIndexCol*80+bindIndexCol*20)+'rpx';
				}else{
					this.domTop = 0;
					let colNum = Math.ceil((monthArr[1]+monthArr[2]+monthArr[4])/7)//当前日期的块在第几行
					this.domHeight = Number(colNum*100)+'rpx'
				}
			},100)
		},
		getTAppointmentList(){
			API.getTAppointmentList(this.thisDay.replace(/-/g,'/')).then(({code,data,msg})=>{
				if(code==1){
					app._log(code,data,msg)
					let {courses,sub_course}=data
					this.appointmentArr=courses
					this.monthSelectArr=JSON.parse(JSON.stringify(sub_course).replace(/\//g,'-'))
					if(courses.length==0){
						this.shrinkButton=true
					}
					if(sub_course.length==0){ //当月没有课程
						this.noDataText='当月暂无课程喔~'
					}else if(courses.length==0){ // 当天没有课程
						this.noDataText='今天暂无课程喔~'
					}else{
						this.noDataText=''
					}
				}else if(code!=405){
					this.showToast(msg||'获取预约记录失败')
					this.appointmentArr=[]
					this.monthSelectArr=[]
				}
			}).catch(err=>{
				this.showToast(err.msg||'获取预约记录失败')
				this.appointmentArr=[]
				this.monthSelectArr=[]
			})
		},
		// 月份切换
		setMonth(num) {
			let { thisMonth, startMonth, endMonth } = this;
			let newMonthObj = setNewdate('m', num, new Date(thisMonth.replace(/-/g, '/') + '/1')); // 新月份
			let newMonth = format(newMonthObj, 'yyyy-MM');
			app._log('新月份', newMonth);
			if (Number(num) < 0) {
				app._log('上个月');
				if (new Date(startMonth.replace(/-/g, '/') + '/1') <= newMonthObj) {
					// 新月份大于起始月份
					app._log('设置成功');
					this.thisMonth = newMonth;
				}
			} else {
				app._log('下个月');
				if (new Date(endMonth.replace(/-/g, '/') + '/1') >= newMonthObj) {
					// 新月份小于起始月份
					app._log('设置成功');
					this.thisMonth = newMonth;
				}
			}
		},
		// 日期切换
		bindDay(i) {
			this.bindIndex = i;
		},
		setShrink() {
			this.shrinkButton = !this.shrinkButton;
		}
	}
};
</script>

<style lang="scss">
.time_box,
.btn_view,
.week_list,
.month_list,
.course_bottom,
.course_info {
	display: flex;
	justify-content: space-between;
}
.week_item,
.month_item,
.month_item .num {
	display: flex;
	justify-content: center;
	align-items: center;
}
.top {
	padding-bottom: 8rpx;
	background-color: #fff;
	.time_box {
		padding: 30rpx 48rpx 50rpx;
		background-color: #fff;
		position: relative;
		z-index: 10;
		.btn_view {
			width: 152rpx;
			.month {
				font-size: 56rpx;
				line-height: 74rpx;
				color: #252748;
			}
			.icon {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
		}
	}
	.week_list {
		padding: 0 32rpx 20rpx;
		background-color: #fff;
		position: relative;
		z-index: 10;
		.week_item {
			width: 98rpx;
			font-size: 24rpx;
			line-height: 34rpx;
			&:not(.navy_blue) {
				color: rgba(143, 143, 154, 0.7);
			}
		}
	}

	.month_list {
		padding: 0 32rpx;
		flex-wrap: wrap;
		position: relative;
		z-index: 1;
		&.shrink {
			overflow: hidden;
		}
		.month_item {
			font-size: 32rpx;
			width: 98rpx;
			height: 80rpx;
			position: relative;
			overflow: hidden;
			margin-bottom: 24rpx;
			.num {
				width: 80rpx;
				height: 80rpx;
			}
			.tips_gery,.tips_active,.tips_this{
				width: 8rpx;
				height: 8rpx;
				border-radius: 50%;
				position: absolute;
				left: 46rpx;
				bottom: 10rpx;
			}
			.tips_ {
				&gery {
					background-color: #d1d2db;
				}
				&active {
					background-color: #7f4aff;
				}
				&this {
					background-color: #ff6f03;
				}
			}
			&.month_item_active {
				.num {
					color: #fff;
					background-color: #7f4aff;
					border-radius: 16rpx;
					opacity: 0.85;
				}
				.tips_gery,.tips_active,.tips_this{
					background-color: #fff;
				}
			}
		}
	}
	.shrink_button {
		text-align: center;
		background-color: #fff;
		position: relative;
		z-index: 10;
		.image {
			width: 48rpx;
			height: 48rpx;
		}
	}
}
.course_list {
	padding: 24rpx 48rpx;
	.course_item {
		width: 654rpx;
		height: 262rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(37, 39, 72, 0.05);
		border-radius: 24rpx;
		padding: 32rpx;
		&:not(:last-child) {
			margin-bottom: 24rpx;
		}
	}
}
.course_top {
	padding-bottom: 34rpx;
	border-bottom: 2rpx solid #f8f8f8;
	.user_header {
		width: 96rpx;
		height: 96rpx;
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 32rpx;
		border: solid 2rpx #ffffff;
		margin-right: 24rpx;
	}
	.course_info {
		flex-direction: column;
		.user_contact {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #252748;
			.nickname{
				margin-right: 15rpx;
			}
		}
		.course_num_text {
			font-size: 26rpx;
			line-height: 36rpx;
			color: #8f8f9a;
			.course_num {
				color: #7f4aff;
				padding: 0 8rpx;
			}
		}
	}
}
.course_bottom {
	margin-top: 34rpx;
	height: 36rpx;
	.course_time {
		height: 36rpx;
		font-size: 26rpx;
		color: #252748;
	}
	.course_state {
		height: 36rpx;
		display: flex;
		align-items: center;
		.course_state_text {
			color: #7f4aff;
			font-size: 26rpx;
			padding-right: 4rpx;
		}
		.image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}
</style>
